<template>
            <el-menu default-active="2" class="el-menu-vertical-demo" router >
                <template v-for="(item, ) in routerList" :key="item.path">
                    <template v-if="!item.children.length">
                        <el-menu-item :index="item.path">
                           
                            <template #title>
                                <el-icon>
                                <component :is="item.meta.icon"></component>
                            </el-icon>
                                <span>{{ item.meta.title }}</span>
                            </template>
                        </el-menu-item>
                    </template>
                    <el-sub-menu :index="item.path" v-if="item.children.length > 0">
                        <template #title>
                            <el-icon>
                                <component :is="item.meta.icon"></component>
                            </el-icon>
                            <span>{{ item.meta.title }}</span>
                        </template>
                        <MyMenu :routerList="item.children"></MyMenu>
                    </el-sub-menu>
                </template>



            </el-menu>
</template>

<script setup lang="ts">
// import {
//     IconMenu,
//     Location
// } from '@element-plus/icons-vue'
defineProps({
    routerList: {
        type: Array,
        // eslint-disable-next-line vue/require-valid-default-prop
        default: []
    }
})


</script>
<script lang="ts">
export default {
    name: 'MyMenu'

}
</script>
<style scoped></style>